﻿
	
    <link href="@Url.Content("~/Scripts/jquery-easyui-1.3.4/themes/default/easyui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jquery-easyui-1.3.4/themes/icon.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jquery-easyui-1.3.4/demo/demo.css")" rel="stylesheet" type="text/css" />
@section CssImport 
{
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
	    table.expand
	    {
            
	    }
        table.expand td
	    {
            padding : 5px 20px;
	    }
        table.expand td:nth-child(2n)
	    {
            color: green;
	    }
	</style>
}
    <script src="@Url.Content("~/Scripts/jquery-easyui-1.3.4/jquery.min.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Scripts/jquery-easyui-1.3.4/jquery.easyui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("http://www.jeasyui.com/easyui/datagrid-detailview.js")" type="text/javascript"></script>

	<script type="text/javascript">
	   
	    var url;
	    var method;
	    function newMaterial() {
	        $('#dlg').dialog('open').dialog('setTitle', 'Thêm nguyên liệu');
	        $('#fm').form('clear');
	        url = 'api/materials';
	        method = 'POST';
	    }
	    function editMaterial() {
	        var row = $('#dg').datagrid('getSelected');
	        if (row) {
	            $('#dlg').dialog('open').dialog('setTitle', 'Sửa nguyên liệu');
	            $('#fm').form('load', row);
	            url = 'api/materials?ma_nguyen_lieu=' + row.ma_nguyen_lieu;
	            method = 'PUT';
	        }
	    }
	    function saveMaterial() {
	        var data = {};
	        data.ten_nguyen_lieu = $('#ten_nguyen_lieu1').val();
	        data.don_vi_tinh = $('#don_vi_tinh').val();
	        data.ton_kho = $('#ton_kho').val();
	        data.muc_bao_dong = $('#muc_bao_dong').val();
	      
	        $.ajax({
	            url: url,
	            cache: false,
	            type: method,
	            contentType: 'application/json; charset=utf-8',
	            data: JSON.stringify(data),
	            success: function (data) {
	                $('#dlg').dialog('close');		// close the dialog
	                $('#dg').datagrid('reload');	// reload
	            }
	        }).fail(function (xhr, textStatus, err) {
	            alert(err);
	        });
	        
	    }
	    function removeMaterial() {
	        var row = $('#dg').datagrid('getSelected');
	        $.ajax({
	            url: 'api/materials/' + row.ma_nguyen_lieu,
	            type: 'delete',
	            success: function (data) {
	                $('#dg').datagrid('reload');	// reload
	            }
	        }).fail(function (xhr, textStatus, err) {
	            alert(xhr + '-' + textStatus + '-' + err);
	        });
	        
	    }

	    function doSearch() {
	        $('#dg').datagrid('load', {
	            name: $('#ten_nguyen_lieu').val()
	        });
	    }

	    function addStyle(value, row, index) {
	        if (value < row.muc_bao_dong) {
	            return 'color:red;';
	        }
	    }
	   
	</script>

	<h2>Quản lý thực đơn</h2>
	
	<table id="dg" title="Danh sách nguyên liệu" class="easyui-datagrid" style="width:700px; height : auto;"
            data-options="url:'api/materials',fitColumns:true,singleSelect:true,pagination:true,method:'get'"
			toolbar="#toolbar" >
		<thead>
			<tr>
				<th field="ten_nguyen_lieu" width="50" sortable="true">Tên nguyên liệu</th>
				<th field="don_vi_tinh" width="50" sortable="true">Đơn vị tính</th>
				<th field="ton_kho" width="50" styler="addStyle" sortable="true">Tồn kho</th>
				<th field="muc_bao_dong" width="50">Mức báo động</th>
			</tr>
		</thead>
        <tbody>
            
        </tbody>

	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newMaterial()">Thêm nguyên liệu</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editMaterial()">Sửa nguyên liệu</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeMaterial()">Xóa nguyên liệu</a>
        <br>
        <span>Tên nguyên liệu:</span>
        <input id="ten_nguyen_lieu" style="line-height:26px;border:1px solid #ccc">
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="doSearch()">Tìm kiếm</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Thông tin nguyên liệu</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>Tên nguyên liệu:</label>
				<input name="ten_nguyen_lieu" id="ten_nguyen_lieu1" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Đơn vị tính:</label>
				<input name="don_vi_tinh" id="don_vi_tinh" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem" class="easyui-validatebox" required="true">
				<label>Tồn kho:</label>
				<input name="ton_kho" id="ton_kho">
			</div>
			<div class="fitem">
				<label>Mức báo động:</label>
				<input name="muc_bao_dong" id="muc_bao_dong" class="easyui-validatebox" required="true">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveMaterial()">Lưu</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Hủy</a>
	</div>

    <script type="text/javascript">
        $(function () {
            $('#dg').datagrid({
                view: detailview,
                detailFormatter: function (index, row) {
                    return '<div class="ddv" style="padding:5px 0"></div>';
                },
                onExpandRow: function (index, row) {
                    var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
                    $.getJSON('api/materials/' + row.ma_nguyen_lieu, function (data) {
                        
                        var content = '<table class=expand cellpadding=0 cellspacing=0>';
                        content += '<tr>';
                        content += '<td>Tên nguyên liệu</td>';
                        content += '<td>' + data.ten_nguyen_lieu + '</td>';
                        content += '</tr>';
                        content += '<tr>';
                        content += '<td>Tồn kho</td>';
                        content += '<td>' + data.ton_kho + '</td>';
                        content += '</tr>';
                        content += '</content>';

                        
                        ddv.panel({
                            height: 80,
                            cache: false,
                            content:content,
                            onLoad: function () {
                                $('#dg').datagrid('fixDetailRowHeight', index);
                            }
                        });
                        $('#dg').datagrid('fixDetailRowHeight', index);
                    });                
                }
            });
        });
    </script>
